<template>
	<view :data-theme="themeStyle">
		<block v-for="(item, index) in diyData.value" :key="index">
			<view v-if="item.controller == 'GoodsCategory'" :style="categoryHeight">
				<!-- <diy-goods-level-category :value="item" @netFinish="netFinish" ref="goodsLevelCategory"></diy-goods-level-category> -->
				<diy-goods-category :category_id="category_ii" :is_padd_bom="true" :value="item" @netFinish="netFinish" ref="goodsLevelCategory"></diy-goods-category>
			</view>
		</block>
		<view class="pick-up-point" v-if="isShowPoint" :class="{ active: isIphoneX }" :style="{ bottom: cartBottom }">
			<view class="pick-up-point-desc">{{!tokenStore ? '马上登录抢爆款商品' : !address ? '选择提货点，即可选购商品' : ''}}</view>
			<view class="pick-up-point-box">
				<button class="pick-up-point-btn color-base-bg" @click="toSelect">{{!tokenStore ? '去登录' : !address ? '去选择' : ''}}</button>
				<!-- <text class="iconfont iconclose" @click="closePoint"></text> -->
			</view>
		</view>
		<view class="cart-box" v-if="cart_show && !isShowPoint" :class="{ active: isIphoneX }" :style="{ bottom: cartBottom }">
			<text class="cart-item">已加购<text class="color-base-text">{{cartnumber}}件</text>商品</text>
			<view class="pay-box">
				<text>合计:</text>
				<text class="color-price-text">￥ <text class="price-text-40">{{cartprice.toFixed(2).split('.')[0]}}</text><text>.{{cartprice.toFixed(2).split('.')[1]}}</text></text>
				<button type="default" class="color-base-bg" @click="pay()">去结算({{cartnumber}})</button>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
		<!-- 底部tabBar -->
		<diy-bottom-nav type="shop"></diy-bottom-nav>
	</view>
</template>

<script>
	import diyGoodsLevelCategory from '@/components/diy-goods-level-category/diy-goods-level-category.vue';
	import diyGoodsCategory from '@/components/diy-goods-category/diy-goods-category.vue';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		components: {
			diyBottomNav,
			diyGoodsLevelCategory,
			diyGoodsCategory
		},
		data() {
			return {
				diyData: {},
				categoryHeight: 0, 
				cart_show: false,
				isShowPoint: false,
				cartBottom: '56px',
				isIphoneX: false,
				token: '',
				category_ii: '',
				address: ''
			};
		},
		mixins: [globalConfig],
		async onLoad() {
			uni.hideTabBar();
			this.getDiyInfo();
			this.isIphoneX = this.$util.uniappIsIPhoneX();
		},
		async onShow() {
			if( this.$refs.goodsLevelCategory ){
				this.$refs.goodsLevelCategory[0].getCategoryList()
			}
			let category_id = uni.getStorageSync('category_id');
			if(category_id != 0){
				if (this.$refs.loadingCover) this.$refs.loadingCover.show();
				this.category_ii = category_id;
				uni.setStorageSync('category_id', 0);
			}
			
			
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
			this.$store.commit("setToken", uni.getStorageSync('token'));

			
			if (this.token) {
				this.$store.commit("setTokenStore", this.token);
				await this.getAddress()
				this.$store.dispatch('getCartNumber');
				this.$store.dispatch('getCartPrice');
				this.$store.dispatch('getCartIds');
			} else {
				this.cart_show = false;
				this.isShowPoint = true;
				this.$store.commit("setTokenStore", null);
			}
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			if (this.$util.uniappIsIPhone11()) {
				this.cartBottom = '90px';
				
			}
			await this.getCateHeight();
			this.$langConfig.refresh();
			if (this.$util.uniappIsIPhone11()) {
				this.cartBottom = '90px';
			}
		},
		async mounted() {
			this.$store.dispatch('getCartNumber');
			this.$store.dispatch('getCartPrice');
			this.$store.dispatch('getCartIds');
		},
		computed: {
			cartnumber() {
				return this.$store.state.cartNumber;
			},
			cartprice() {
				return this.$store.state.cartPrice;
			},
			cartids() {
				return this.$store.state.cartIds;
			},
			tokenStore() {
				if (this.$store.state.tokenStore) {
					this.getAddress();
				}
				this.getCateHeight();
				return this.$store.state.tokenStore;
			},
		},
		methods: {
			toSelect() {
				if (this.token) {
					if (this.latitude && this.longitude) {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose', {
							latitude: this.latitude,
							longitude: this.longitude
						});
					} else {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose');
					}
				} else {
					this.$refs.login.open('/pages/index/index/index');
				}
			},
			async getCateHeight() {
				var cateHeight = 0;
				var res = await uni.getSystemInfo({
					async: false
				});

				cateHeight = res[1].windowHeight - 57;
				if (this.token && this.cart_show && !this.isShowPoint) {
					cateHeight -= 50;
				}

				if (this.isShowPoint) {
					cateHeight -= 50;
				}

				if (this.$util.uniappIsIPhoneX()) {
					// #ifdef MP-WEIXIN
					cateHeight -= 31;
					// #endif
				}
				this.categoryHeight = "height:" + cateHeight + "px";
			},
			//监听子组件分类列表是否请求完成
			netFinish(e) {
				if (e) {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			},
			getDiyInfo() {
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: 'DIYVIEW_GOODS_CATEGORY'
					},
					success: res => {
						if (res.code != 0 || !res.data) {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							return;
						}
						this.diyData = res.data;

						if (this.diyData.value) {
							this.diyData = JSON.parse(this.diyData.value);
						}
						uni.stopPullDownRefresh();
					},
					fail: res => {}
				});
			},
			// 购物车处理
			SelectCart() {
				if (this.$store.state.cartnumber != 0) {
					this.cart_show = true
				}
			},
			// 获取地址信息
			async getAddress() {
				let res = await this.$api.sendRequest({
					url: '/api/community/getMemberCommunity',
					async: false
				})
				
				if (res.code >= 0) {
					this.isShowPoint = false;
					this.address = res.data.community;
					this.SelectCart()
				} else {
					this.address = '';
					this.isShowPoint = true;
					this.cart_show = false
				}
			},
			// 结算
			pay() {
				uni.setStorage({
					key: 'orderCreateData',
					data: {
						cart_ids: this.cartids
					},
					success: () => {
						if (this.cartids == '') {
							this.$util.showToast({
								title: '请选择要购买的商品'
							});
							return;
						}
						this.$util.redirectTo('/pages/order/payment/payment');
					}
				});
			},
			closePoint() {
				this.isShowPoint = false;
			}
		}
	};
</script>

<style lang="scss">
	.color-price-text{
		color: 	#FF4544;
		font-size: 32rpx !important;
		font-family: PingFang SC;
		font-weight: bold;
		.price-text-40{
			margin-right: 0 !important;
			font-size: 40rpx !important;
		}
	}
	.pick-up-point {
		z-index: 998;
		background-color: rgba(0, 0, 0, .7);
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $padding $margin-both;
		box-sizing: border-box;
		position: fixed;
		bottom: 210rpx;
		left: 0;
		width: 100%;
		border-bottom: 2rpx solid $color-line;

		.pick-up-point-desc {
			color: #FFFFFF;
		}

		.pick-up-point-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			button {
				width: 180rpx;
				height: 60rpx;
				padding: 0;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				margin: 0;
			}

			text.iconfont {
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		&.pick-up-point-bottom {
			bottom: 110rpx;
		}
	}

	.cart-box {
		position: fixed;
		z-index: 5;
		width: 100vw;
		height: 100rpx;
		background: #fff;
		bottom: var(--window-bottom);
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 56px;
		z-index: 9;
		padding: $padding;
		box-sizing: border-box;

		.cart-item {
			font-size: $font-size-tag;

			text {
				margin: 0 4rpx;
			}
		}

		.pay-box {
			display: flex;
			align-items: center;

			text {
				margin-right: 10rpx;
			}

			.color-base-text {
				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			button {
				padding: 0;
				text-align: center;
				margin: 0;
				color: white;
				height: 74rpx;
				width: 176rpx;
				line-height: 70rpx;
			}
		}
	}

	.pick-up-point.active {
		bottom: calc(constant(safe-area-inset-bottom) + 56px) !important;
		bottom: calc(env(safe-area-inset-bottom) + 56px) !important;
	}

	.cart-box.active {
		bottom: calc(constant(safe-area-inset-bottom) + 56px) !important;
		bottom: calc(env(safe-area-inset-bottom) + 56px) !important;
	}

	/deep/ .uni-popup__wrapper.uni-center {
		background: rgba(0, 0, 0, 0.6);
	}

	/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		border-radius: 10px;
		background: rgba($color: #000000, $alpha: 0);
	}

	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		overflow-y: visible;
	}
</style>
